<template>
  <div class="container">
    <xy-table
      :api="api"
      :columns="columns"
      :on-check="onCheck"
      :on-edit="onEdit"
      :on-view="onView"
      @selection-change="handleSelectionChange"
      class="xy-table"
    >
      <template #selection>
        <el-table-column
          align="center"
          type="selection"
        ></el-table-column>
        <!-- :selectable="isDisabled" -->
      </template>
      <template #addItem>
        <el-button
          @click="tiaoyemian"
          size="mini"
        >测试页面</el-button>

        <el-button
          @click="addItem"
          size="mini"
        >
          <i class="el-icon-plus"></i>
          {{ $language.local("添加") }}
        </el-button>
        <el-button
          @click="bulkImport"
          size="mini"
        >
          <i class="el-icon-upload2"></i>
          {{ $language.local("Excel 导入") }}
        </el-button>
        <el-button
          @click="onStop"
          size="mini"
        >
          <i class="el-icon-close"></i>
          {{ $language.local("SetStop") }}
        </el-button>
        <el-button
          @click="onFinish"
          size="mini"
        >
          <i class="el-icon-check"></i>
          {{ $language.local("Finish") }}
        </el-button>
      </template>

      <template #edit="{ row }">
        <el-button
          @click="onEdit(row)"
          class="edit-btn"
          size="mini"
          type="text"
          v-if="row.TskStatus < 1"
        >{{ $language.local("修改") }}</el-button>
        <span
          hidden
          v-else
        ></span>
      </template>
      <template #check="{ row }">
        <span
          hidden
          v-if="row.TskStatus >5"
        ></span>
      </template>

      <template #appendButton="{ row }">
        <template v-if="user.roletype === 99 && row.TskStatus < 6">
          <el-button
            @click="onPay(row)"
            class="edit-btn"
            size="mini"
            type="text"
          >{{ $language.local("充值") }}</el-button>
        </template>
        <template v-else>
          <el-button
            @click="onRelease(row)"
            class="edit-btn"
            size="mini"
            type="text"
            v-if="row.TskStatus ===1"
          >{{ $language.local("发包") }}</el-button>
          <template v-else-if="row.TskStatus > 1 && row.TskStatus<5 ">
            <el-button
              @click="onSettlement(row)"
              class="edit-btn"
              size="mini"
              type="text"
            >{{ $language.local("结算") }}</el-button>
            <el-button
              @click="onFinish(row)"
              class="edit-btn"
              size="mini"
              type="text"
            >{{ $language.local("完结") }}</el-button>
          </template>
        </template>
        <!-- <el-button
          @click="onStop(row)"
          class="edit-btn"
          size="mini"
          type="text"
          v-if="row.TskStatus < 6"
        >{{ $language.local("终止") }}</el-button>-->
      </template>
      <!-- #region Delete -->
      <template #delete="{row}">
        <span
          hidden
          v-if="row.TskStatus>1"
        ></span>
      </template>
      <!-- #endregion -->
    </xy-table>
    <el-dialog
      :title="dialogData.title"
      :visible.sync="formDialogVisible"
      width="62%"
    >
      <div class="amount-box">
        实付:
        <span class="symbol">￥</span>
        <span class="amount-box">{{ addForm.Amount }}</span>
      </div>
      <ul class="grid-flex">
        <template v-for="(value, key) in addForm">
          <template v-if="/File|Amount/.test(key)"></template>
          <li
            :key="key"
            class="row"
            v-else
          >
            <div class="label">{{ $language.local(key) }}：</div>
            <!-- <div>{{ addForm[key] }}</div> -->
            <template v-if="key === 'SettlementModes'">
              <div>{{ settlementModes[addForm[key]] }}</div>
            </template>

            <div v-else>{{ addForm[key] }}</div>
          </li>
        </template>
      </ul>
      <el-form
        class="grid-flex"
        label-width="5rem"
      >
        <el-form-item label="导入明细">
          <upload-file
            :on-success="handleSuccessed"
            v-model="addForm.AttFile"
          ></upload-file>
        </el-form-item>
        <el-form-item label="其它文件">
          <upload-file v-model="addForm.otherFile"></upload-file>
        </el-form-item>
      </el-form>
      <xy-table
        :columns="employeesColumns"
        :list="employees"
        :param="empTableParam"
        class="settlement-table"
      >
        <template #addItem>
          <span></span>
        </template>
        <template #operationButton>
          <span></span>
        </template>
      </xy-table>
      <div class="form-footer">
        <el-button
          @click="formDialogVisible = false"
          class="mr-1"
          icon="el-icon-close"
          size="mini"
        >取消</el-button>

        <el-button
          @click="handleSettlement"
          class="ml-1"
          icon="el-icon-finished"
          size="mini"
          type="danger"
        >结算</el-button>
      </div>
    </el-dialog>

    <!-- 查看弹出层 -->
    <el-dialog
      :title="dialogData.title"
      :visible.sync="viewDialogVisible"
      class="view-dialog"
      width="70%"
    >
      <div class="view-body">
        <div class="svg-status">
          <svg
            data-name="图层 1"
            id="图层_1"
            viewBox="0 0 1039.2 780.94"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <defs>
              <clipPath
                id="clip-path"
                transform="translate(223.12 -30.91)"
              >
                <rect
                  class="cls-1"
                  height="781.92"
                  width="1039.88"
                  x="-223"
                  y="30.89"
                />
              </clipPath>
            </defs>
            <title>yiwancheng9</title>
            <g class="cls-2">
              <path
                :style="`fill:${TskStatusColor}`"
                class="cls-3"
                d="M296.41,185a235.69,235.69,0,0,1,189.9,95.78l30.14,8.11c-45-74.58-126.74-124.39-220-124.39A256.51,256.51,0,0,0,172,196.59l30,8.12A235.61,235.61,0,0,1,296.41,185Zm155.23-13.35L468.15,185l5.09-20.09,18.44-10.73-18.44-10.74-5.09-20.09-16.51,13.35L430,135.21l8.26,19-8.26,19Zm-286.1-44.86L148.61,115,144.9,135.9l-17.34,12.94,18.72,8.94,6.19,19.82,15.27-15.41,21.19-.69-9.35-18.31L186.46,123Zm158.81-28.9L311.82,81.55l-9.91,18.85-20.5,7,15.14,14.31-.14,20.78,19.27-10L336,138.24l-3.16-20.37,12.66-17.2ZM554.29,227l-17.75-12.38-2.48,20.64-16.78,12.25,19.4,9.63,7.43,19.95,14.59-14.72H580l-10.46-18.72,5.78-19.81ZM785.62,382.23l-893.1-239.31a41.15,41.15,0,0,0-50.36,29l-63.85,238.2a41.16,41.16,0,0,0,29,50.37l893.1,239.31a41.16,41.16,0,0,0,50.36-29l63.85-238.21a41.14,41.14,0,0,0-29-50.36Zm6.47,54.91L733.6,655.39a30.83,30.83,0,0,1-37.7,21.74L-177.39,443.19a30.84,30.84,0,0,1-21.74-37.71l58.49-218.39a30.83,30.83,0,0,1,37.7-21.74L770.35,399.29a31,31,0,0,1,21.74,37.85ZM296.41,51.55c171.19,0,315.13,116.28,357.38,274.12l22.7,6.05C636,159.3,481.22,30.91,296.41,30.91A389.71,389.71,0,0,0,12.11,153.66l22.7,6.05A369.72,369.72,0,0,1,296.41,51.55Zm94.4,586.5a236.43,236.43,0,0,1-284.16-76.24l-30.14-8.12c45,74.59,126.74,124.4,220,124.4A256.65,256.65,0,0,0,421,646ZM170.36,680.71,154,667.36l-5.09,19.95-18.3,10.74,18.3,10.73,5.09,20,16.38-13.34L191.83,717l-8.26-19,8.26-19ZM296.41,744l12.52,16.37,9.77-18.71,20.37-7-15-14.31.14-20.78-19.13,9.91-20.23-5.78L288,724.05l-12.66,17.2ZM36.6,614.93l16.79,13.48,4-20.36,17.48-11L56.28,586.17,50.36,565.8,35,579.42l-21.19-1.51,9.08,19.26-7.16,19.41ZM296.41,791.21C125.22,791.21-18.72,674.92-61,517.09L-83.67,511C-43.21,683.46,111.6,811.85,296.41,811.85c112,0,213-47.2,284.31-122.75L558,683.05a369.22,369.22,0,0,1-261.6,108.16ZM445,715.8l16.79,11.83,3.58-20.78,17.2-12.93L464,685l-6.19-19.81-15.14,15.27-21.05.69,9.22,18.44-6.75,20.23Zm0,0"
                transform="translate(223.12 -30.91)"
              />
            </g>
            <text
              :style="`fill:${TskStatusColor}`"
              class="cls-4"
              transform="translate(132.41 378.18) rotate(15.23)"
            >{{ $common.dictionary.get("TskStatus", viewFormData.TskStatus) }}</text>
          </svg>
        </div>

        <el-collapse
          align="center"
          bgcolor="#cd8846"
          v-model="activeNames"
        >
          <el-collapse-item name="1">
            <div
              class="title"
              slot="title"
            >
              <h1 class="hstyle">任务基本信息</h1>
            </div>

            <!-- bgcolor="#dddddd"
              border="0"
              cellpadding="2"
              cellspacing="1"
            class="task-table"-->
            <table
              border="1"
              cellspacing="0"
              class="table"
            >
              <tr>
                <td class="label">
                  <span style="font-weight: bold;">任务名称</span>
                </td>
                <td style="width:150px">{{ viewFormData.projectName }}</td>
                <td class="label">
                  <span style="font-weight: bold;">起止日期</span>
                </td>
                <td
                  style="width:200px"
                >{{ $common.formatDate(viewFormData.BegTime) }} - {{$common.formatDate(viewFormData.EndTime)}}</td>
                <td class="label">
                  <span style="font-weight: bold;">{{ $language.local("任务地区") }}</span>
                </td>
                <td style="width:200px">{{ viewFormData.taskRegionC }}</td>
              </tr>
              <tr>
                <td class="label">
                  <span style="font-weight: bold;">任务编号</span>
                </td>
                <td>{{ viewFormData.BusinessNo }}</td>
                <td class="label">
                  <span style="font-weight: bold;">任务类型</span>
                </td>
                <td>{{ viewFormData.ServiceType }}</td>

                <td class="label">
                  <span style="font-weight: bold;">任务预算(元)</span>
                </td>
                <td>{{ viewFormData.Amount }}</td>
              </tr>

              <tr>
                <td class="label">
                  <span style="font-weight: bold;">工作内容</span>
                </td>
                <td colspan="5">{{ viewFormData.WorkContent }}</td>
              </tr>
              <tr>
                <td class="label">
                  <span style="font-weight: bold;">{{ $language.local("RecruitmentRequirements") }}</span>
                </td>
                <td colspan="5">{{ viewFormData.RecruitmentRequirements }}</td>
              </tr>
              <tr>
                <td class="label">
                  <span style="font-weight: bold;">{{ $language.local("充值信息") }}</span>
                </td>
                <td>
                  <el-button
                    @click="onShowRechargeDialog"
                    type="text"
                  >{{ $language.local('View') }}</el-button>
                </td>

                <td class="label">
                  <span style="font-weight: bold;">{{ $language.local("CanSettlementAmount") }}</span>
                </td>
                <td>{{ viewFormData.CanSettlementAmount }}</td>
                <td class="label">
                  <span style="font-weight: bold;">{{ $language.local("TskStatus") }}</span>
                </td>
                <td>{{ $common.dictionary.get('TskStatus',viewFormData.TskStatus) }}</td>
              </tr>
            </table>
          </el-collapse-item>
          <el-collapse-item name="2">
            <div slot="title">
              <h1>任务管理信息</h1>
            </div>
            <div>
              <table
                border="1"
                cellspacing="0"
              >
                <tr>
                  <td style="width:150px">
                    <span style="font-weight: bold;">接单信息</span>
                  </td>
                  <td style="width:185px">
                    <el-button
                      @click="onViewEmployees"
                      type="text"
                    >查看</el-button>
                  </td>
                  <td style="width:150px">
                    <span style="font-weight: bold;">结算信息</span>
                  </td>
                  <td style="width:250px">
                    <el-button
                      @click="onViewPayList"
                      type="text"
                    >查看</el-button>
                  </td>
                  <td style="width:150px">
                    <span style="font-weight: bold;">{{ $language.local("发票信息") }}</span>
                  </td>
                  <td colspan="2">
                    <el-button
                      @click="onViewInvoice"
                      type="text"
                    >查看</el-button>
                  </td>
                </tr>
              </table>
              <!-- <xy-table
                :columns="employeesColumns"
                :list="viewFormData.EmpList"
                class="settlement-table"
              >
                <template #addItem>
                  <span></span>
                </template>
                <template #operation>
                  <span></span>
                </template>
              </xy-table>-->
            </div>
          </el-collapse-item>
          <!--   <el-collapse-item name="3">
            <div slot="title">
              <h1>充值记录</h1>
            </div>
            <div>
              <xy-table
                :columns="rechargeKeys"
                :list="viewFormData.RechargeList"
                class="settlement-table"
              >
                <template #addItem>
                  <span></span>
                </template>
                <template #operation>
                  <span></span>
                </template>
              </xy-table>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <div slot="title">
              <h1>支付记录</h1>
            </div>
            <div>
              <xy-table
                :columns="payKeys"
                :list="viewFormData.PayList"
                class="settlement-table"
              >
                <template #addItem>
                  <span></span>
                </template>
                <template #operation>
                  <span></span>
                </template>
              </xy-table>
            </div>
          </el-collapse-item>
          <el-collapse-item name="5">
            <div slot="title">
              <h1>开票记录</h1>
            </div>
            <div>
              <xy-table
                :columns="invoiceKeys"
                :list="viewFormData.InvoiceList"
                class="settlement-table"
              >
                <template #addItem>
                  <span></span>
                </template>
                <template #operation>
                  <span></span>
                </template>
              </xy-table>
            </div>
          </el-collapse-item>-->
          <el-collapse-item name="6">
            <div slot="title">
              <h1>操作记录</h1>
            </div>
            <display-table :model="operationLog"></display-table>
          </el-collapse-item>
        </el-collapse>

        <div
          class="view-footer"
          slot="footer"
        >
          <el-button
            @click="viewDialogVisible = false"
            class="mr-1"
            icon="el-icon-close"
            size="mini"
            type="primary"
          >取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- #region 导入任务 -->
    <el-dialog
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="addDialogVisible"
      title="添加任务"
      width="62%"
    >
      <import-task></import-task>
    </el-dialog>
    <!-- #endregion -->

    <!-- #region 任务发包 -->
    <el-dialog
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="releaseTaskDialogVisible"
      title="任务发包"
      width="62%"
    >
      <release-task :spid="task.ID"></release-task>
    </el-dialog>
    <!-- #endregion -->
    <!-- #region 充值信息 -->

    <el-dialog
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="rechargeInfoDialogVisible"
      title="充值信息"
      width="62%"
    >
      <xy-table
        :columns="rechargeKeys"
        :list="viewFormData.RechargeList"
        class="settlement-table"
      >
        <template #addItem>
          <span></span>
        </template>
        <template #operation>
          <span></span>
        </template>
        <template #pagination>
          <span></span>
        </template>
      </xy-table>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="employeeDialogVisible"
      title="接单人"
      width="62%"
    >
      <xy-table
        :columns="employeesColumns"
        :list="viewFormData.EmpList"
        class="settlement-table"
      >
        <template #header>
          <span></span>
        </template>
        <template #operation>
          <span></span>
        </template>
        <template #pagination>
          <span></span>
        </template>
      </xy-table>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="payDialogVisible"
      title="结算列表"
      width="62%"
    >
      <xy-table
        :columns="payKeys"
        :list="viewFormData.PayList"
        class="settlement-table"
      >
        <template #addItem>
          <span></span>
        </template>
        <template #operation>
          <span></span>
        </template>
        <template #pagination>
          <span></span>
        </template>
      </xy-table>
    </el-dialog>
    <!-- #endregion -->
    <!-- #region Invoice -->
    <el-dialog
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="invoiceDialogVisible"
      title="发票信息"
      width="62%"
    >
      <xy-table
        :columns="invoiceKeys"
        :list="viewFormData.InvoiceList"
        class="settlement-table"
      >
        <template #addItem>
          <span></span>
        </template>
        <template #operation>
          <span></span>
        </template>
        <template #pagination>
          <span></span>
        </template>
      </xy-table>
    </el-dialog>
    <!-- #endregion -->
  </div>
</template>

<script>
import API from "../../plugins/api";
import TaskInfo from "./TaskInfo2.vue";
import ReleaseTask from "./ReleaseTask.vue";
export default {
  inject: ["reload"],
  components: {
    "import-task": TaskInfo,
    "release-task": ReleaseTask
  },
  data() {
    return {
      apiName: "/api/Seivice",
      api: new API("/api/ServiceProject/"),
      formDialogVisible: false,
      releaseTaskDialogVisible: false,
      rechargeInfoDialogVisible: false,
      payDialogVisible: false,
      invoiceDialogVisible: false,
      employeeDialogVisible: false,
      dialogData: {
        title: "",
      },
      columns: {
        customerName: "",
        projectName: "",
        //  PerformanceFeeSettlementRules: "",
        ServiceType: "",
        // WorkContent: "",
        // ServiceName: "",
        BegTime: "",
        EndTime: "",
        Amount: "",
        CanSettlementAmount: "",
        // Ctime: "",
        // checkstatus: "",
        TskStatus: "",
      },
      formData: {
        customerName: null,
        // SID: "",
        ServiceType: "",
        // PostName: "",
        projectName: "",

        recruitPerson: "",

        // BusinessNo: "",
        // WorkContent: "",
        // PerformanceFeeSettlementRules: "",
        // RecruitmentRequirements: "",

        // ServiceName: "",
        SettlementModes: "",

        BegTime: "",
        EndTime: "",

        // attFileName: null,
        // attFilePath: null,
        // otherSettlementModes: "",
        // checker: "",
        // checkstatus: "",

        // Reason: "",
      },
      addDialogVisible: false,
      addForm: {},
      rechargeData: {
        ServiceProviderName: "",
        ServiceBank: "",
        // ServiceBankId: null,
        ServiceAccountNo: "",
        PayChannelId: "",

        // MID: "客户",
        CustomerName: "",
        // _agentname: "客户名称",
        ruleType: "",
        RechargeRate: "",
        RechargeTime: "",
        RechargeAmount: "",
        // _rechargetime: "充值时间",
        AccountAmount: "",
        PayingAccountName: "",
        PayingBank: "",
        PayingAccount: "",
        Note: "",
      },
      list: null,
      customers: [],
      services: [],
      settlementModes: {
        1: "按项目工作时间结算",
        2: "按项目工作成果结算",
        3: "按项目完工进度结算",
        4: "其它方式",
      },

      user: this.$store.getters.user,
      viewDialogVisible: false,
      activeNames: ["1"],
      empApi: new API("/api/employee/GetList"),
      empTableParam: {
        auditStatus: 1,
      },
      employeesColumns: {
        EmpName: "钟平上",
        IdCardNo: "431027199106272031",
        Phone: "15116228316",
        BankCardNo: "6216612800aa00447287",
        // atime: "2021-07-15T18:28:51",
        // // ServiceContent: "*信息技术服务*软件开发服务",
        // performanceDetail: "速冻食品装卸搬运工作（示例数据，上传时删除）",
        // performanceTotal: "100",
        // unitprice: 50,
        // Amount: 5000,
        // Error: "企业员工签约率低于风控阀值",
      },
      employees: [],
      rechargeKeys: {
        RechargeAmount: "106.38",
        AccountAmount: "100.00",
        ruleType: "A",
        Indate: "2021/8/17 15:44:20",
        customerReceiptUrl: "/upload/clientUp/244b402d-4b79-476c-8579-b253fedebfe3.png"
      },
      payKeys: {
        BeneficiaryName: "张雅",
        PaymentOutAmount: "50.00",
        // trxId: ""
      },
      invoiceKeys: {
        ApplicationTime: "2021/8/17 16:04:08",
        InvoiceTaxAmount: "53.19",
        InvoiceType: "企业增值税专用发票",
        // "InvoiceFilePath": "",
        InvoiceCode: "1212",
        InvoiceNumber: "asd",
        TaxAmount: "3.01"
      },
      viewFormData: {},
      operationLog: {
        Ctime: "",
        checkdate: "",
        finashdate: "",
        takingdate: "",
        paydate: "",
        checker: "",
        TskStatus: "",
        // TskStatusCH: "",
      },
      ids: "",
      task: {}
    };
  },
  computed: {
    TskStatusColor() {
      return (
        this.$common.dictionary.get(
          "TskStatusColor",
          this.viewFormData.TskStatus
        ) || ""
      );
    },
  },
  created() {
    let date = new Date("2021-02-01<br/>2021-05-20");
    console.log(date);

  },
  methods: {
    tiaoyemian(){
      this.$router.push("/test1");
    },
    addItem() {
      // this.addDialogVisible = true;
      this.$router.push("/task-info");
    },
    bulkImport() {
      this.addDialogVisible = true;
    },
    onEdit(row) {
      this.$router.push({
        path: "/task-info",
        query: {
          apiName: "/api/ServiceProject/Edit",
          id: row.ID,
        },
      });
    },
    onCheck(row) {
      console.log(row);
      this.$router.push({
        path: "/task-info",
        query: {
          action: "Check",
          apiName: "/api/ServiceProject/Check/",
          id: row.ID,
        },
      });
    },
    async getCustomer() {
      let response = await this.$http.get("/api/Merchant/GetList");
      this.customers = response.data.Data;
    },
    async getServices() {
      let response = await this.$http.get("/api/ServiceProvider/GetList");
      this.services = response.data.Data;
    },
    onRelease(row){
      console.log(row);
      this.task = row;
      this.releaseTaskDialogVisible = true;
    },
    onPay(row) {
      console.log(row);
      this.$router.push({
        name: "立即充值",
        params: {
          apiName: "/api/recharge/Create",
          TSKID: row.ID,
        },
      });
    },
    onSettlement(row) {
      this.$router.push({
        path: "/ServiceProjectList/TSKSettlementDetail",
        query: {
          id: row.ID,
          action: "create",
          CanSettlementAmount: row.CanSettlementAmount,
        },
      });
    },
    async handleSettlement() {
      console.log(this.addForm);
      const response = await this.$http.post(
        "/api/TSKSettlement/Create",
        this.addForm
      );
      console.log(response);
      this.addForm = {};
      this.formDialogVisible = false;
    },
    /**
     * 导入明细成功后回调
     * @param { Object }  {url,name}
     */
    async handleSuccessed(e) {
      console.log(e);
      this.formData.attFileName = e.docname;
      const response = await this.$http.post(
        `/api/TSKSettlement/batchInput?ExcelUrl=${e.docurl}`
      );
      console.log(response);
      this.employees = [...this.employees, ...response.data.Data];
      console.log(this.employees);
      // response.data.Data.forEach((v) => {
      //   this.orderEmployees.push(v.Id);
      // });
      // console.log(this.orderEmployees);
      // this.orderEmployees
    },
    async onView(row) {
      console.log(row);
      this.dialogData.title = "查看";
      const response = await this.$http.get(
        `/api/ServiceProject/GetModel/${row.ID}`
      );
      // this.viewFormData = response.data.Data;
      this.viewFormData = { ...row, ...response.data.Data };
      console.log(this.viewFormData);
      for (const key in this.operationLog) {
        this.operationLog[key] = this.viewFormData[key];
      }
      this.viewDialogVisible = true;
    },
    async onShowRechargeDialog(){
      this.viewFormData.RechargeList = await this.getTaskAdditionalInfo("RechargeList", this.viewFormData.ID);

      this.rechargeInfoDialogVisible = true;
    },
    async onViewEmployees(){
      this.viewFormData.EmpList = await this.getTaskAdditionalInfo("EmpList", this.viewFormData.ID);
      this.employeeDialogVisible = true;
    },
    async onViewPayList(){
      this.viewFormData.PayList = await this.getTaskAdditionalInfo("PayList", this.viewFormData.ID);
      this.payDialogVisible = true;
    },
    async onViewInvoice(){
      this.viewFormData.InvoiceList = await this.getTaskAdditionalInfo("InvoiceList", this.viewFormData.ID);
      this.invoiceDialogVisible = true;
    },

    async getTaskAdditionalInfo(action, taskid){
      const response = await this.$http.get(`/api/ServiceProject/Get${action}/?taskid=${taskid}`);
      return response.data.Data;
    },
    handleSelectionChange(val = []) {

      let array = Array.from(val, (v) => v.ID);
      this.ids = array.join("#");
    },
    isDisabled(row){
      return row.TskStatus < 2;
    },
    async onFinish(row) {
      await this.$confirm(
        `${this.$language.local(
          "确定完结任务吗？"
        )}`,
        this.$language.local("提示"),
        {
          confirmButtonText: this.$language.local("确定"),
          cancelButtonText: this.$language.local("取消"),
          type: "warning",
        }
      );
      console.log({ row });
      let ids = this.ids;
      if(row){
        ids = row.ID;
      }
      await this.$http.post("/api/ServiceProject/SetFinish", null, {
        ids,
      });
      this.reload();
    },
    async onStop() {
      await this.$http.post("/api/ServiceProject/SetStop", null, {
        ids: this.ids,
      });
      this.reload();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  .edit-btn {
    margin-left: none !important;
  }
}
.el-select {
  width: 100%;
}
.el-date-picker {
  width: 100%;
}
.xy-table {
  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
}
.el-dialog {
  .amount-box {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    .symbol {
      font-size: 0.8rem;
    }
  }
  ul {
    li {
      width: 50%;
      margin: 1ex 0;
      .label {
        width: 200px;
        text-align: right;
        padding: 0 1ex;

        font-size: 12px;
      }

      .html-text {
        width: 100%;
      }
    }
    .li-html {
      width: 100%;
    }
  }
  .task-table {
    width: 100%;
    display: table;
    border-collapse: separate;

    text-indent: initial;
    // border-spacing: 2px;
    border-color: #c87c35 !important;
    border-top-color: #c87c35;
    border-right-color: #c87c35;
    border-bottom-color: #c87c35;
    border-left-color: #c87c35;

    td {
      height: 12px;
      line-height: 60%;
      text-align: center;
      &:nth-child(odd) {
        background-color: #f3f3f3;
      }
      &:nth-child(even) {
        background-color: #fff;
      }
    }
  }
}

.view-body {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 3rem;
  .task-status {
    font-size: 5rem;
    position: absolute;
    top: 1rem;
    right: 10rem;
    z-index: 100;
  }
  .view-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 0;
    background-color: white;
    z-index: 100;
    box-shadow: 0 -2px 4px #ddd;
  }
}
.svg-status {
  position: absolute;
  width: 160px;
  top: 1rem;
  right: 10rem;
  z-index: 100;
}

.hstyle {
  font-size: 15px;
}
</style>
<style>
.label {
  width: 120px;
  background: #f3f3f3;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 1130px;
}
table td {
  height: 40px;
  border: 1px solid #d5d7d8;
  color: #666;

  text-align: center;
  font-size: 10px;
}

.cls-1 {
  fill: none;
}
.cls-2 {
  clip-path: url(#clip-path);
}
.cls-3,
.cls-4 {
  fill: #2c933a;
}
.sv-success {
  fill: #2c933a;
}
.sv-warning {
  fill: rgb(250, 173, 20);
}
.cls-4 {
  font-size: 252.08px;
  font-family: SimHei;
}
</style>
